<template>
  <el-container style="height:100%;">
    <el-main style="text-align: left;">
        <div >{{stepNumber.title}}</div>
        <div style="margin: 15px 0;"></div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCloumns" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="cloumn in cloumns" :label="cloumn.id" :key="cloumn.id">{{cloumn.title}}</el-checkbox>
        </el-checkbox-group>
    </el-main>
    <el-footer>
      <div style="float:right;">
      <el-button type="primary" @click="last">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
      <el-button @click="resetForm">取消</el-button>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  props:{
    stepNumber:Object
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.selectTableByApiId();
    this.selectResultByApiId();
  },
  methods: {
    selectResultByApiId(){
      var _this = this;
      this.axios
        .post(this.HOST+"/apiResult/findByApiId", {
          apiId: this.stepNumber.dataApi.id
        })
        .then(function(res) {
          debugger;
          if(res.data.success && res.data.data.length >0){
            for(let i = 0 ; i < res.data.data.length ; i++){
              _this.checkedCloumns.push(res.data.data[i].cloumnId);
            }
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    selectTableByApiId(){
      var _this = this;
      this.axios
        .post(this.HOST+"/apiTable/findByApiId", {
          apiId: this.stepNumber.dataApi.id
        })
        .then(function(res) {
          debugger;
          if(res.data.success ){
            _this.selectResultCloumns(res.data.data.id)
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    selectResultCloumns(tableId){
      var _this = this;
      this.axios
        .post(this.HOST+"/api/manager/modelcolumn/getColumnInfoData", {
          tableId: tableId
        })
        .then(function(res) {
          debugger;
          res = res.data;
          if(res.success ){
            _this.cloumns=res.data;
            for(let i = 0 ; i < _this.cloumns.length;i++ ){
              _this.cloumnIds.push(_this.cloumns[i].id);
            }
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    last(){
      this.stepNumber.active--;
    },
    next(){
      let _this=this;
      let ids ="";
      if(this.checkedCloumns.length ==0){
        this.$message({
          type: "error",
          message: "请选择返回数据"
        });
      }else{
        for(let i = 0; i <this.checkedCloumns.length;i++){
          if(i == 0 ){
            ids += this.checkedCloumns[i];
          }else{
            ids +=","+ this.checkedCloumns[i];
          }
        }
        this.axios
          .post(this.HOST+"/apiResult/create", {
            apiId: _this.stepNumber.dataApi.id,
            ids:ids
          })
          .then(function(res) {
            debugger;
            _this.stepNumber['cloumns'] = _this.cloumns;
            _this.stepNumber.active++;
          })
          .catch(function(err) {
            console.log(err);
          });
        }
    },
    resetForm() {
      this.$router.push("/");
    },
    handleCheckAllChange(val) {
      this.checkedCloumns = val ? this.cloumnIds : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      debugger;
      this.checkedCloumns = value;
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cloumns.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cloumns.length;
    }
  },
  data() {
    return {
      checkAll: false,
      checkedCloumns: [],
      cloumns: [],
      cloumnIds:[],
      isIndeterminate: true
    };
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
</style>
